<template>
    <div ref="protocolPage" class="agreementPrivacy">
        <HeaderTop title="Terms"></HeaderTop>
        <div v-html="privacy" class="content"></div>
    </div>
  </template>
  
  <script>
  // import Hybrid from '@/components/uzone-hybrid';
  import HeaderTop from '@/components/header-top'
  export default {
    components:{
        HeaderTop
    },
    name: 'agreementPrivacy',
    data () {
      return {
        privacy: '',
        hasNotice: false,
      };
    },
    methods: {
      /**
       * 初始化 外部打开协议页面的情况
       */
      init() {
        const user = this.$storage.get('user');
        if (!user) {
          this.$storage.set('user', { code: '' });
          this.getPrivacy();
        } else {
          this.getPrivacy();
        }
      },
      /**
       * 获取协议内容
       */
      getPrivacy() {
        const params = {
          systemName: 'app',
          module: 'app_setting',
          function: 'privacy_protocol',
          key: 'privacy_protocol',
          status: '0',
        };
        this.$api.getAppSettingOne(params).then(res => {
          const { status, error, data } = res;
          if ('1' === status && ('00000000' === error || '0000' === error) && data) {
            this.privacy = data.value;
            this.$nextTick(() => {
              this.listenScroll();
            });
          }
        });
      },
      noticeBottom() {
        // 通知APP，页面已经滚动到底部，阅读完成，通知一次
        if (!this.hasNotice) {
          this.hasNotice = true;
          // const hybrid = new Hybrid(this.$os.android ? 'android' : 'ios');
          this.$hybrid.action('scrollBottom', { scrollBottom: true });
        }
      },
      listenScroll() {
        const page = this.$refs.protocolPage;
        const winHeight = window.innerHeight;
        const scrollTop = document.scrollingElement.scrollTop;
        if (scrollTop + winHeight + 20 >= page.clientHeight) {
          this.noticeBottom();
        }
        window.addEventListener('scroll', () => {
          const scrollTop = document.scrollingElement.scrollTop;
          if (scrollTop + winHeight + 20 >= page.clientHeight) {
            this.noticeBottom();
          }
        });
      },
    },
    created() {
      this.init();
    }
  };
  </script>
  
  <style lang="scss">
  @import './index..scss';
    // .agreementPrivacy {
    //   padding:100px 20px 20px 20px;
    //   line-height:36px;
    //   font-size:24px;
    //   word-wrap: break-word;
      
    //   .content {
    //     h1 {
    //       font-size:48px;
    //       font-weight: bold;
    //       margin: 0.28em 0;
    //     }
    //     h2 {
    //       font-size:36px;
    //       font-weight: bold;
    //       margin: 0.4em 0;
    //     }
    //     h3 {
    //       font-size:28px;
    //       font-weight: bold;
    //       margin: 0.5em 0;
    //     }
    //     h4 {
    //       font-size:26px;
    //       font-weight: bold;
    //       margin: 1em 0;
    //     }
    //     h5 {
    //       font-size:24px;
    //       font-weight: bold;
    //       margin: 1em 0;
    //     }
    //     h6 {
    //       font-size:18px;
    //       font-weight: bold;
    //       margin: 1em 0;
    //     }
    //     p {
    //       margin: 1em 0;
    //     }
    //   }
    // }
  </style>
  